<template>
  <div class="hello">
    <header>
    <nav id="navbar" class="navbar navbar-light navbar-expand-sm fixed-top">
      <div class="container">
        <a class="navbar-brand title font-weight-lighter" href="/">
          <span class="font-weight-bold">薛明亮</span>
        </a>
        <div class="collapse navbar-collapse text-right" id="navbarNav">
          <ul class="navbar-nav ml-auto flex-nowrap">
            <!-- About -->
            <li class="nav-item "><a class="nav-link" href="/">about</a></li>
            <!-- Other pages -->
            <li class="nav-item "><a class="nav-link" href="/Book">Book</a></li>
            <li class="nav-item "><a class="nav-link" href="/Publications">Publications</a></li>
            <li class="nav-item "><a class="nav-link" href="/Research">Research</a></li>
            <li class="nav-item "><a class="nav-link" href="/Service">Service</a></li>
            <li class="nav-item "><a class="nav-link" href="/Students">Students</a></li>
            <li class="nav-item "><a class="nav-link" href="/Talks">Talks</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->



<style scoped>

.navbar.navbar-light a:hover {
  text-decoration: none;
}
.navbar.navbar-light .navbar-brand {
  color: var(--global-text-color);
}
.navbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--global-text-color);
}
.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: var(--global-hover-color);
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link {
  background-color: inherit;
  font-weight: bolder;
  color: var(--global-theme-color);
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link:hover {
  color: var(--global-hover-color);
}
.navbar.navbar-light .navbar-brand.social {
  padding-bottom: 0;
  padding-top: 0;
  font-size: 1.7rem;
}
.navbar.navbar-light .navbar-brand.social a i::before {
  color: var(--global-text-color);
  -webkit-transition: all 0.2s ease-in-out;
}
.navbar.navbar-light .navbar-brand.social a:hover i::before {
  color: var(--global-theme-color);
}
</style>
